import type { Map } from "ol";
import MousePosition from "ol/control/MousePosition";
import OverviewMap from "ol/control/OverviewMap";
import ScaleLine from "ol/control/ScaleLine";
import Zoom from "ol/control/Zoom";
import ZoomSlider from "ol/control/ZoomSlider";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { projection } from "./view";

/** 鼠标位置控件 (MousePosition) */
const mousePositionControl = new MousePosition({
    className: "ol-custom-mouse-position",
    coordinateFormat: (coord) => { // 格式化坐标显示
        if (coord && coord.length === 2) {
            return `经度: ${coord[0].toFixed(6)}, 纬度: ${coord[1].toFixed(6)}`;
        } else {
            return "无效坐标";
        }
    },
    placeholder: "无坐标", // 当鼠标不在地图上时显示的文本
    projection, // 计算使用的坐标系
});

/** 鹰眼/概览图控件 (OverviewMap) */
const overviewMapControl = new OverviewMap({
    className: "ol-custom-overviewmap",
    layers: [
        new TileLayer({
            source: new OSM(),
        }),
    ],
    collapseLabel: "", // 折叠按钮文本
    label: "", // 展开按钮文本
    collapsed: true, // 初始是否折叠
    tipLabel: "鹰眼图", // 按钮提示
});

/** 比例尺控件 (ScaleLine) */
const scaleControl = new ScaleLine({
    className: "ol-custom-scale-line", // 自定义CSS类
    units: "metric", // 单位: 'metric'(米制), 'imperial'(英制), 'nautical'(海里), 'degrees'(度)
    minWidth: 100, // 限制最小宽度, 缩放时宽度会改变, 保证文字不换行
    // bar: true, // 是否显示条形比例尺
    // text: true, // 是否显示文字比例尺
});

/** 缩放控件 (Zoom) */
const zoomControl = new Zoom({
    className: "ol-custom-zoom", // 自定义CSS类
    zoomInLabel: "+", // 放大按钮文本
    zoomOutLabel: "-", // 缩小按钮文本
    zoomInTipLabel: "放大", // 放大按钮提示
    zoomOutTipLabel: "缩小", // 缩小按钮提示
    delta: 1, // 每次点击的缩放级别变化
});

/** 缩放滑块控件 (ZoomSlider) */
const zoomSliderControl = new ZoomSlider({
    className: "ol-custom-zoom-slider", // 自定义CSS类
    duration: 200, // 滑动动画持续时间
});

/** 添加地图控件 */
export default (map: Map, controls: string[]): void => {
    const controlList: any = {
        mousePosition: mousePositionControl,
        overviewMap: overviewMapControl,
        scale: scaleControl,
        zoom: zoomControl,
        zoomSlider: zoomSliderControl,
    };
    controls.forEach((control) => {
        const controlInstance = controlList[control];
        if (controlInstance) {
            map.addControl(controlInstance);
        }
    });
};

/**
 * 不采用恢复视图组件, 而是通过自定义事件实现
 * 功能已验证, 保留注释代码备用
 */
// const zoomToExtentControl = new ZoomToExtent({
//     className: "ol-custom-zoom-to-extent", // 自定义CSS类
//     extent: [117.0, 31.0, 118.0, 32.0], // 设置地图的初始范围 (经纬度), 需要地图厂商提供具体的范围
//     label: "↔", // 恢复视图按钮文本
//     tipLabel: "恢复视图", // 按钮提示
// });

/**
 * 不使用全屏控件 (FullScreen) 而是通过 JS API 实现
 * 功能已验证, 仅能全屏地图模块, 保留注释代码备用
 */
// const fullScreenControl = new FullScreen({
//     className: "custom-fullscreen", // 自定义CSS类
//     label: "⤢", // 进入全屏按钮文本
//     labelActive: "⤢", // 退出全屏按钮文本
//     tipLabel: "全屏", // 按钮提示
//     keys: true, // 是否允许按F11进入全屏
// });

/**
 * 不采用旋转控件组件, 而是通过自定义事件实现
 * 功能已验证, 保留注释代码备用
 */
// const rotateControl = new Rotate({
//     className: "ol-custom-rotate",
//     label: "↻", // 重置旋转按钮文本
//     tipLabel: "重置方向", // 按钮提示
//     duration: 250, // 无效，动画持续时间(毫秒)
//     autoHide: true, // 无效，角度为0时是否自动隐藏
// });
